<template>
    <div class="block full <?php echo $this->tableName;?>_index">
        <div class="block-title">
            <h2><?php echo $this->table_comment;?>列表</h2>
        </div>
        <div class="table-responsive">
            <div class="btn-group"   :style="{'margin-bottom': '10px'}">
                <button type="button" class="btn btn-danger">Left</button>
                <button type="button" class="btn btn-primary" :style="{'margin-left': '10px'}">Middle</button>
                <button type="button" class="btn btn-success" :style="{'margin-left': '10px'}"> Right</button>
            </div>
            <table id="example-datatable" class="table table-striped table-bordered table-vcenter">
                <thead>
                <tr>
                <?php foreach($this->index_table as $title_key=>$titles){ ?>
                            <th><?php echo "{$titles['title']}";?></th>
                <?php }?>
                <th class="text-center" style="width: 200px;"><i class="fa fa-flash"></i></th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(list,index) in lists">
                    <?php foreach($this->index_table as $key=>$value){ ?>
                                <?php if($value['name']=='id'){ ?>
                                                <td> <input type="checkbox" v-model="actions_param" :value="list.<?php echo $value['name'];?>">
                                                    {{ list.<?php echo $value['name'] ?> }}
                                                </td>
                                <?php  }else{ ?>
                                                <td>{{ list.<?php echo $value['name']; ?> }}</td>
                                <?php }?>
                    <?php }?>
                    <td class="text-center">
                        <div class="btn-group">
                            <button type="button" class="btn btn-success">启用</button>
                            <button type="button" class="btn btn-primary" style="margin-left: 10px" @click="editInfo(list)">编辑</button>
                            <button type="button" class="btn btn-danger" style="margin-left: 10px;">禁用</button>
                        </div>
                    </td>
                </tr>
                </tbody>
            </table>
            <transition name="paginate" mode="out-in">
                <paginate :nowPaginate="parseInt(currentPage)" :totalList="totalList" v-if="pageShow"></paginate>
            </transition>
            <transition name="edit" mode="out-in">
                <user-edit v-if="editShow" :<?php echo $this->tableName."Info" ?>="EditInfo"  @CloseEdit='editClose'></user-edit>
            </transition>
      </div>
        <transition name="loading" mode="out-in">
            <loading v-if="loadAt"></loading>
        </transition>
    </div>
</template>
<script type="text/ecmascript-6">
    import http from '../../static/http/http';
    import {mapState, mapMutations} from 'vuex';
    import loading    from '../../components/comment/loading/loading';
    import _    from 'lodash';
    import <?php echo ucfirst($this->tableName).'Edit'?> from './edit'; // 吧编辑页面拿到列表页以增强用户体验
    import paginate   from '../../components/comment/paginate/paginate'
    const ERROR_CODE = 1001;
    export default{
        name:"<?php echo $this->tableName;?>_index",
        mixins: [http],
        data(){
            return {
                actions_param:[],
                lists:[],
                editShow:false,
                EditInfo:{ },
                currentPage:1,  // 基础配置
                totalList:1,    // 基础配置
                pageShow:false,
                <?php
                  $out_side     ='';
                  foreach($this->index_table as $item)
                  {
                       $mutil_param             =   $item['type'];
                       if(true===is_array($mutil_param) && true===is_array($mutil_param['other_value'])){
                           $mutil_value         =   $mutil_param['other_value'];
                           $text                ='';
                           foreach($mutil_value as $mutil){
                                  $text.=$mutil['value'].':'."'{$mutil['title']}',";
                            }
                           $text           =trim($text,',');
                           $out_side.=$item['name'].':{'."{$text}".'},';
                       }
                   }
                   $out_side         =trim($out_side,',');
                   echo 'field_name:{' ."{$out_side}".  '},';
                ?>
            }
        },
        created(){
            this.get_list();
        },
        computed:{
            ...mapState({loadAt: 'loading'})
        },
        methods: {
            ...mapMutations({
                set_loadAt:'set_loading'
            }),
            get_list(){
                this.set_loadAt({code:100,meta:true});
                this.pageShow = false;
                let page    =this.$route.query.page || 1;
                this.apiGet(`<?php echo "{$index_uri}";?>/?page=${page}`).then((response) => {
                    let response_data = response.data.list.data;
                    let error_code = response.data.status;
                    let data = response_data;
                    if(error_code!==ERROR_CODE && data.length!==0){
                       this.$nextTick( (response_text) => {
                        this.currentPage   = response.data.list.current_page;
                        this.totalList      =response.data.list.total;
                            //  如果后台用了我们tp5的拾取器，或者修改器的话那么请删除下面循环代码 下面代码不简洁可优化
                           data.forEach((value)=>{
                                let keys        =   Object.keys(value);
                                keys.forEach( (item) => {
                                    if(item in this.field_name){
                                        value[item] =   this.field_name[item][value[item]];
                                    }
                                });
                            });
                            this.lists          =   [...data];
                            this.pageShow = true;
                        });
                        this.set_loadAt({code:120,meta:false,custom_info:response.data.info});
                    }else {
                        this.set_loadAt({code:120,meta:false,custom_info:response.data.info});
                    }
                }).catch( (response) =>{
                    this.set_loadAt({code:102,meta:false});
                });
            },editInfo(info){
                this.EditInfo=info;
                this.editShow=true;
            },editClose(){
                this.editShow=false;
            }
        },components:{loading,<?php echo ucfirst($this->tableName).'Edit'?>,paginate},
        watch:{
            '$route':'get_list'
        }
    }
</script>
<style type="stylus">
    .edit-enter-active, .edit-leave-active {
        transition: all .4s;
    }

    .edit-enter, .edit-leave-active {
        transform: translate3d(2rem, 0, 0);
        opacity: 0;
    }
    .paginate-enter-active, .paginate-leave-active {
        transition: all .4s;
    }

    .paginate-enter, .paginate-leave-active {
        transform: translate3d(2rem, 0, 0);
        opacity: 0;
    }
</style>
